<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>

<body>
    <div id="app">
        <div class="a" ><input type="checkbox" @click="chooseAll(!isflag)" v-model="isflag"><span @click="qie1">人员</span> </div>
        <div v-if="!flag">
            <p v-for="(item,key) in list1" :key="key"><input type="checkbox" v-model="item.flag" @click="chooseOne(key)">
                <span>{{item.title}}</span>
            </p>
        </div>
        <div class="b" @click="qie2"><input type="checkbox">项目</div>
        <div v-if="!show">
            <p v-for="(item,key) in list2" :key="key"><input type="checkbox" v-model="item.flag">
                <span>{{item.title}}</span>
            </p>
        </div>
        <div class="c" @click="qie3"><input type="checkbox">机构</div>
        <div v-if="!edit">
            <p v-for="(item,key) in list3" :key="key"><input type="checkbox" v-model="item.flag">
                <span>{{item.title}}</span>
            </p>
        </div>

    </div>
</body>

</html>
<script>
    new Vue({
        el: '#app',
        data: {
            list1: [
                { title: '第一组01', flag: false },
                { title: '第一组02', flag: false },
                { title: '第一组03', flag: false },
                { title: '第一组04', flag: false },
                { title: '第一组05', flag: false },
                { title: '第一组06', flag: false }
            ],
            list2: [
                { title: '第二组01', flag: false },
                { title: '第二组02', flag: false },
                { title: '第二组03', flag: false },
                { title: '第二组04', flag: false },
                { title: '第二组05', flag: false },
                { title: '第二组06', flag: false }
            ],
            list3: [
                { title: '第三组01', flag: false },
                { title: '第三组02', flag: false },
                { title: '第三组03', flag: false },
                { title: '第三组04', flag: false },
                { title: '第三组05', flag: false },
                { title: '第三组06', flag: false }
            ],
            flag: false,
            show:true,
            edit:true,
            isflag:false
        },
        methods: {
            qie1(){
                this.flag = !this.flag
            },
            qie2(){
                this.show = !this.show
            },
            qie3(){
                this.edit = !this.edit
            },
            chooseOne(key){
                this.list1[key].flag = !this.list1[key].flag
            },
            chooseAll(flag){
                this.list1.forEach(item=>{
                    if(flag){
                        item.flag=true
                    }else{
                        item.flag=false
                    }
                })
            }
        },
        watch:{
            list1:{
                handler(val){
                    let arr = val.filter(item=>item.flag==true)
                    if(arr.length==val.length){
                        this.isflag = true
                    }else{
                        this.isflag = false
                    }
                },
                deep:true,
                immediate:true
            }
        }
    })
</script>

<style>
    .a {
        width: 100%;
        height: 40px;
        background-color: orange;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 10px;
    }

    .b {
        width: 100%;
        height: 40px;
        background-color: orange;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 10px;
    }

    .c {
        width: 100%;
        height: 40px;
        background-color: orange;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 10px;
    }
</style>